Ci sono diversi modi per visualizzare una didascalia relativa ad una fotografia e, questa volta, ho voluto provare a realizzare questa applicazione con il solo ausilio dei CSS.

Perchè "nascosta"? Perchè quando si apre la pagina vedremo solo l´immagine; quando, invece, passeremo con il mouse su di essa, apparirà la descrizione su uno sfondo semitrasparente in modo tale da leggere il testo e vedere, sotto di esso, parte della foto, sul background opaco.

Il codice CSS di cui ci avvarremo, è davvero poco e molto molto semplice. Cominciamo.

Il codice CSS

Prevedendo di utilizzare una immagine con dimensioni pari a 500 per 300 pixel, dobbiamo realizzare il contenitore per posizionarla all´interno, che ho nominato #foto.

#foto{
margin:0;
padding:10px;
height:300px;
position:relative;
border-top: 1px solid #ddd;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #ddd;
background-color: #fff;
width: 522px;
voice-family: "\"}\"";
voice-family:inherit;
width: 500px;
}

Da notare che al contenitore ho assegnato un padding di 10 pixel e dei bordi di 1 pixel, in modo da dare alla foto un effetto "tridimensionale", vale a dire come se fosse poggiata su un piano leggermente in rilievo. Questo è importante non solo per l´effetto "visivo", ma ci serve anche per fare dei calcoli al fine di avere una omogenea resa su più browser.

Mi sono avvalso della tecnica di Tantek [per quanto riguarda il box model] e così, nella parte finale del codice ho impostato prima la larghezza massima del contenitore [522 pixel], all´ultimo rigo la sua larghezza effettiva. In ultimo ho dichiarato il box con una posizione relativa, perchè al suo interno avremo degli elementi con posizionamento assoluto.

Annulliamo margini, padding e bordi alle immagini con il seguente codice:

img{
margin:0;
padding:0;
border:none;
}

L´elemento span

Introduciamo adesso l´elemento span che ci permetterà di avere lo sfondo opaco. Esso nello stato di link non visitato, non deve essere visibile, quindi avremo:

#foto a span{
position:absolute;
left:-9999px;
text-decoration:none;
}

Nello stato :hover, invece, deve avere le seguenti caratteristiche:

#foto a:hover span{
position:absolute;
top:10px;
left:10px;
width:500px;
height:100px;
font-weight:bold;
background:#fff;
color:#000;
padding:5px 0 5px 0;
font-size:90%;
filter:alpha(opacity=40);
-moz-opacity:.4;
opacity:.40;
}

Ho scritto prima che all´interno del box #foto avremmo avuto elementi con posizionamento assoluto; mi riferivo proprio allo "span" in oggetto. L´ho posizionato a 10 pixel dall´alto e da sinistra. Largo quanto la foto [500 pixel], alto 100 pixel, con uno sfondo di colore bianco, e con una opacità pari a 40.

A proposito della opacità, in precedenza, ho scritto qualche articolo, quindi non è il caso di soffermarmi. Piccola annotazione: per l´esempio in questione ho impostato, al tag span, un´altezza di 100 pixel. Se le vostre descrizioni conterranno più o meno testo, potrete aumentarla o diminuirla.

tratto da: webmasterpoint.org